<template>
 <van-popup
  class="access_itpop"
  v-model="isAccessShow"
  position="bottom"
  closeable
  close-icon-position="top-right"
  overlay
  :style="{height:'83%'}">
  <div class="it_container">
<div class="area">
    <h6>职业类型</h6>
    <van-row  type="flex" justify="space-between">
        <van-col>
             <van-button round  size="small">全部职位</van-button>
        </van-col>
        <van-col>
             <van-button round  size="small">月嫂</van-button>
        </van-col>
        <van-col>
             <van-button round  size="small">育婴师</van-button>
        </van-col>
        <van-col>
             <van-button round  size="small">养老/陪护</van-button>
        </van-col>
         <van-col>
             <van-button round  size="small">保洁/清洁</van-button>
        </van-col>
        <van-col>
             <van-button round  size="small">保姆</van-button>
        </van-col>
        <van-col>
             <van-button round  size="small">产康师</van-button>
        </van-col>
        <van-col>
             <van-button round  size="small">早教/托管</van-button>
        </van-col>
    </van-row>
</div>
<div class="area">
    <h6>学历</h6>
    <van-row  type="flex" justify="space-between">
        <van-col>
             <van-button round  size="small">小学</van-button>
        </van-col>
        <van-col>
             <van-button round  size="small">初中</van-button>
        </van-col>
        <van-col>
             <van-button round  size="small">中专</van-button>
        </van-col>
        <van-col>
             <van-button round  size="small">职高</van-button>
        </van-col>
         <van-col>
             <van-button round  size="small">高中</van-button>
        </van-col>
        <van-col>
             <van-button round  size="small">大专</van-button>
        </van-col>
        <van-col>
             <van-button round  size="small">本科</van-button>
        </van-col>
        <van-col>
             <van-button round  size="small">研究生及以上</van-button>
        </van-col>
    </van-row>
</div>
<div class="area">
    <h6>民族</h6>
    <van-row  type="flex" justify="space-between">
        <van-col>
             <van-button round  size="small">汉族</van-button>
        </van-col>
        <van-col>
             <van-button round  size="small">蒙古族</van-button>
        </van-col>
        <van-col>
             <van-button round  size="small">回族</van-button>
        </van-col>
        <van-col>
             <van-button round  size="small">藏族</van-button>
        </van-col>
         <van-col>
             <van-button round  size="small">维吾尔族</van-button>
        </van-col>
        <van-col>
             <van-button round  size="small">苗族</van-button>
        </van-col>
        <van-col>
             <van-button round  size="small">傣族</van-button>
        </van-col>
        <van-col>
             <van-button round  size="small">壮族</van-button>
        </van-col>
    </van-row>
</div>
<div class="area">
    <h6>婚姻状况</h6>
     <van-row  type="flex" justify="space-between">
        <van-col>
             <van-button round  size="small">未婚</van-button>
        </van-col>
        <van-col>
             <van-button round  size="small">已婚</van-button>
        </van-col>
        <van-col>
             <van-button round  size="small">离异</van-button>
        </van-col>
        <van-col>
             <van-button round  size="small">丧偶</van-button>
        </van-col>
    </van-row>
</div>
<div class="area">
    <h6>星座</h6>
     <van-row  type="flex" justify="space-between">
        <van-col>
             <van-button round  size="small">水瓶座(01.20-02.19)</van-button>
        </van-col>
        <van-col>
             <van-button round  size="small">双鱼座(02.20-03.21)</van-button>
        </van-col>
        <van-col>
             <van-button round  size="small">白羊座(03.22-04.20)</van-button>
        </van-col>
        <van-col>
             <van-button round  size="small">金牛座(04.21-05.21)</van-button>
        </van-col>
         <van-col>
             <van-button round  size="small">双子座(05.22-06.21)</van-button>
        </van-col>
        <van-col>
             <van-button round  size="small">巨蟹座(06.22-07.23)</van-button>
        </van-col>
        <van-col>
             <van-button round  size="small">狮子座(07.24-08.24)</van-button>
        </van-col>
        <van-col>
             <van-button round  size="small">处女座(08.25-09.24)</van-button>
        </van-col>
        <van-col>
             <van-button round  size="small">天秤座(09.25-10.23)</van-button>
        </van-col>
        <van-col>
             <van-button round  size="small">天蝎座(10.24-11.22)</van-button>
        </van-col>
        <van-col>
             <van-button round  size="small">射手座(11.23-12.20)</van-button>
        </van-col>
        <van-col>
             <van-button round  size="small">摩羯座(12.21-01.19)</van-button>
        </van-col>
    </van-row>
</div>
<!-- <div class="open">展开</div> -->
<div class="area">
    <h6>生肖</h6>
    <van-row  type="flex" justify="space-around">
        <van-col>
             <van-button round  size="small">鼠肖</van-button>
        </van-col>
        <van-col>
             <van-button round  size="small">鸡肖</van-button>
        </van-col>
        <van-col>
             <van-button round  size="small">狗肖</van-button>
        </van-col>
        <van-col>
             <van-button round  size="small">猪肖</van-button>
        </van-col>
         <van-col>
             <van-button round  size="small">牛肖</van-button>
        </van-col>
        <van-col>
             <van-button round  size="small">龙肖</van-button>
        </van-col>
        <van-col>
             <van-button round  size="small">羊肖</van-button>
        </van-col>
        <van-col>
             <van-button round  size="small">猴肖</van-button>
        </van-col>
        <van-col>
             <van-button round  size="small">兔肖</van-button>
        </van-col>
        <van-col>
             <van-button round  size="small">虎肖</van-button>
        </van-col>
        <van-col>
             <van-button round  size="small">马肖</van-button>
        </van-col>
        <van-col>
             <van-button round  size="small">蛇肖</van-button>
        </van-col>
    </van-row>
</div>
<div class="area">
    <h6>工作年限</h6>
     <van-row  type="flex" justify="space-around">
        <van-col>
             <van-button round  size="small">1年</van-button>
        </van-col>
        <van-col>
             <van-button round  size="small">2年</van-button>
        </van-col>
         <van-col>
             <van-button round  size="small">3年</van-button>
        </van-col>
        <van-col>
             <van-button round  size="small">4年</van-button>
        </van-col>
        <van-col>
             <van-button round  size="small">5年</van-button>
        </van-col>
        <van-col>
             <van-button round  size="small">6年</van-button>
        </van-col>
        <van-col>
             <van-button round  size="small">7年</van-button>
        </van-col>
        <van-col>
             <van-button round  size="small">8年</van-button>
        </van-col>
        <van-col>
             <van-button round  size="small">9年</van-button>
        </van-col>
        <van-col>
             <van-button round  size="small">10年</van-button>
        </van-col>
    </van-row>
</div>
<div class="area">
    <h6>主要技能</h6>
     <van-row  type="flex" justify="space-between">
        <van-col>
             <van-button round  size="small">做饭</van-button>
        </van-col>
        <van-col>
             <van-button round  size="small">产后康复</van-button>
        </van-col>
        <van-col>
             <van-button round  size="small">月子餐</van-button>
        </van-col>
        <van-col>
             <van-button round  size="small">小儿推拿</van-button>
        </van-col>
    </van-row>
</div>
<van-row type="flex" justify="space-around" class="btn">
  <van-col span="12">
      <van-button round  size="normal" @click="concel">清除条件</van-button>
  </van-col>
  <van-col span="12">
      <van-button round  size="normal" @click="confirm">确认筛选</van-button>
  </van-col>
</van-row>
  </div>
 </van-popup>

</template>

<script>
export default {
  name: 'ItAccess',
  data () {
    return {
      isAccessShow: false,
    }
  },
  methods: {
    showDialog () {
      this.isAccessShow = true
    },
    concel () {
      this.isAccessShow = false
    },
    confirm () {
      this.isAccessShow = false
    },
  },
}
</script>

<style lang="scss" scoped>
// .access_itpop{
// }
.it_container{
    .open{
        font-size: 22px;
        color: #979191;
        margin-top: 30px;
        display: flex;
        justify-content: center;
    }
    .area{
        padding-left: 20px;
        padding-right: 20px;
        h6{
            font-size: 14px;
            color: #101010;
        }
        .van-button{
        //  width: 150px;
          height: 50px;
          color: #979191;
           border: 1px solid #979191;
          margin-right: 20px;
          .van-button__text{
              margin-left: 20px;
              margin-right: 20px;
          }
        }
    }
    .btn{
        .van-button{
            width:300px;
            height: 70px;
            color: #fff;
            background-color: #3f51b5;
            margin:40px 30px;
        }
    }
}
</style>
